<template>
  <div class="list-box">
    <van-collapse v-model="activeNames">
      <van-collapse-item title="我创建的项目" name="1">
        <div class="list-item" v-for="(item1,index1) in createdPro" :key="index1" @click="toPro(item1.id)">
          <span>{{item1.name}}</span>
          <span><van-icon name="arrow" /></span>
        </div>
      </van-collapse-item>
      <van-collapse-item title="我管理的项目" name="2">
        <div class="list-item" v-for="(item2,index2) in managePro" :key="index2" @click="toPro(item2.id)">
          <span>{{item2.name}}</span>
          <span><van-icon name="arrow" /></span>
        </div>。
      </van-collapse-item>
      <van-collapse-item title="我参与的项目" name="3">
        <div class="list-item" v-for="(item3,index3) in parPro" :key="index3" @click="toPro(item3.id)">
          <span>{{item3.name}}</span>
          <span><van-icon name="arrow" /></span>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router"
import {ref} from "vue"

// 路由
const router = useRouter()
// 激活面板
const activeNames = ref(['3'])
// 用户创建项目
let createdPro = ref([
  {
    name:'项目1',
    id:'01',
  },{
    name:'项目2',
    id:'02',
  },{
    name:'项目3',
    id:'03',
  },{
    name:'项目4',
    id:'04',
  },
])
// 用户管理项目
let managePro = ref([
  {
    name:'项目5',
    id:'05',
  },{
    name:'项目6',
    id:'06',
  },{
    name:'项目7',
    id:'07',
  },
])
// 用户参与项目
let parPro = ref([
  {
    name:'2022年新宾高标准农田',
    id:'000',
  },{
    name:'项目8',
    id:'08',
  },{
    name:'项目9',
    id:'09',
  },{
    name:'项目10',
    id:'010',
  },
])


// 跳转至项目详情
const toPro = (id) => {
  router.push(`/project?proId=${id}`)
}
</script>

<style scoped lang="less">
.list-box{
  height: auto;
  width: 96%;
  margin: 50px auto 150px auto;
  padding: 30px 0;
  border-radius: 15px;
  box-shadow: 0 0 15px lightgray;
  border: 1px solid lightgray;
  background-color: #fff;
  .list-item{
    font-size: 28px;
    margin: -10px;
    width: 100%;
    height: 80px;
    line-height: 80px;
    display: flex;
    justify-content: space-between;
    padding: 10px 0px 10px 50px ;
    box-sizing: border-box;
    color: gray !important;
  }
}
/deep/.van-cell__title, .van-cell__value{
  flex: 1;
  text-align: left;
  padding-left: 30px;
}
</style>